<!-- 信息反馈 -->
<template>
  <div class="app-container">
    <search
      ref="mysearch"
      @doReset="doReset"
      @doQuery="doRefresh"
      :ruleform="ruleForm"
    >
      <template slot="top">
        <el-form-item label="问题类型：" prop="type">
          <el-select v-model="ruleForm.feedbackType">
            <el-option
              v-for="(item,index) in bugType"
              :key="index"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间：" prop="createDate">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.createDate"
            value-format="yyyy-MM-dd hh:mm:ss"
          ></el-date-picker>
        </el-form-item>
      </template>
      <div slot="foot"></div>
    </search>
    <myTable
      ref="mytable"
      :config="tableconfig"
      @handleSelectChange="handleSelectChange"
    >
      <div slot="mytablebody"></div>
      <!-- 图片 -->
      <template v-slot:picture="{ data }">
        <el-image
          style="width: 100%; height: 40px"
          :src="data.picture"
        ></el-image>
      </template>
      <!-- 图片路径 -->

      <!-- 操作 -->
    </myTable>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { allFeedbackType, allFeedback } from "@/api/feedback";
export default {
  data() {
    //这里存放数据
    return {
      ruleForm: {
        feedbackType: "",
        createDate: "",
      },
      paramsbox: {
        feedbackType: "",
        createDate: "",
        // pageNo: 1,
        // pageSize: 20,
      },
      tableconfig: {
        loading: false,
        isselection: false,
        ispagination: false,
        tabledata: [],
        isindex: true,
        thead: [
          { sort: null, label: "序列号", prop: "id", width: 100 },
          { sort: null, prop: "name", label: "用户名", width: 150 },
          {
            sort: null,
            prop: "type",
            label: "问题类型",
            width: 150,
            type: "slot",
          },
          {
            sort: null,
            label: "图片",
            prop: "picture",
            type: "slot",
            width: 250,
          },
          { sort: null, label: "问题内容", prop: "content" },
          { sort: null, label: "提交时间", prop: "time" },
        ],
        currentpage: 1,
        pagesize: 0,
        total: 0,
      },
      bugType: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handlefeakBackType() {
      allFeedbackType().then((res) => {
        console.log(res, "rrrrrrrrr");
        if (res.code == 200) {
          this.bugType = res.result;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleSelectChange(section) {
      this.selectrow = section;
    },
    // 重置搜索
    doReset() {
      console.log(Object.keys(this.ruleForm).slice(0, -2), "this.ruleForm");
      Object.keys(this.ruleForm).map((x) => {
        this.ruleForm[x] = "";
      });
      console.log(this.ruleForm, "this.ruleForm.pageSize");
      this.$message({
        message: "已重置",
        type: "success",
      });
      this.doRefresh();
    },
    // 刷新
    doRefresh() {
      //页码从第一页开始
      this.tableconfig.currentpage = 1;
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
      this.doQuery();
    },
    async doQuery() {
      // 获取表格
      this.tableconfig.loading = true;
      // this.tableconfig.currentpage = this.paramsbox.pageNo;
      // this.tableconfig.pagesize = this.paramsbox.pageSize;
      let data1 = await allFeedback(this.ruleForm);
      console.log(data1);
      if (data1.success) {
        this.tableconfig.total = data1.result.count;
        this.tableconfig.tabledata = data1.result;
      }
      this.tableconfig.loading = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handlefeakBackType();
    this.doQuery();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style scoped lang="scss">
@import "./../../assets/reset.css";
.app-container {
  width: 100%;
  padding: 20px 30px;
}
.table-box {
  margin-top: 25px;
}
.blue-link {
  color: #1890ff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload-list__item-actions:hover span {
  display: inline-block;
}
.el-icon-zoom-in:before {
  content: "\E626";
}
.el-icon-delete:before {
  content: "\E612";
}
.el-upload-list__item-actions:hover {
  opacity: 1;
}
.el-upload-list__item-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  /*height: 150px;*/
  display: block;
}
.upload-icon {
  position: absolute;
  top: 50%;
  margin-left: -28px;
  margin-top: -18px;
}
.dialogBox .el-dialog {
  top: 30% !important;
  width: 30%;
}
</style>